<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">班级名</label>
            <div class="layui-input-block">
                <input type="text" name="classname" lay-verify="required" lay-reqtext="班级名不能为空" placeholder="请输入班级名" value="" class="layui-input">
                <tip>填写班级的名称，如 19-3数据科学与大数据技术。</tip>
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">人数</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input type="number" name="people" placeholder="请输入班级人数" value="" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label required">学院</label>
            <div class="layui-input-block">
                <select name="college" lay-verify="" id="college-select">
                    <option value="">请选择一个学院</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">年级</label>
            <div class="layui-input-block">
                <select name="grade" lay-verify="" id="grade-select">
                    <option value="">请选择一个年级</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">专业</label>
            <div class="layui-input-block">
                <select name="major" lay-verify="" id="major-select">
                    <option value="">请选择一个专业</option>
                </select>
            </div>
        </div>
        <!--        <div class="layui-form-item layui-form-text">-->
        <!--            <label class="layui-form-label">备注信息</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }

        //学院选择
        jq1111.ajax({
            type: "GET",
            crossDomain:true,
            url: BasePath+"api/School/Colleges",
            contentType: "application/json",
            dataType:"json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                var colleges=message.data;
                console.log(message);
                colleges.forEach(function (college) {
                    console.log(college)
                    jq1111("#college-select").append('' +
                        '<option value="' +
                        college.id +
                        '">' +
                        college.name +
                        '</option>' +
                        '')
                })
                //再次初始化form
                form.render();
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.message);
            },
        });

        //年纪选择
        jq1111.ajax({
            type: "GET",
            crossDomain:true,
            url: BasePath+"api/School/Grades",
            contentType: "application/json",
            dataType:"json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message)
                var grades=message.data;
                grades.forEach(function (grade) {
                    jq1111("#grade-select").append('' +
                        '<option value="' +
                        grade.id +
                        '">' +
                        grade.display +
                        '</option>' +
                        '')
                })
                //再次初始化form
                form.render();
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.message);
            },
        });

        //专业选择
        var collegeSelectValLast=jq1111("#college-select").val();
        var timer = window.setInterval(function(){
            console.log("timer")
            if(jq1111("#college-select").val()!=collegeSelectValLast){
                var children=jq1111("#major-select").children();
                for (i=1;i<children.length;i++){
                    children.eq(i).remove();
                }
                //专业选择
                jq1111.ajax({
                    type: "GET",
                    crossDomain:true,
                    url: BasePath+"api/School/Majors?collegeId="+jq1111("#college-select").val(),
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        var majors=message.data;
                        majors.forEach(function (major) {
                            jq1111("#major-select").append('' +
                                '<option value="' +
                                major.id +
                                '">' +
                                major.name +
                                '</option>' +
                                '')
                        });
                        //再次初始化form
                        form.render();
                        collegeSelectValLast=jq1111("#college-select").val()
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                        collegeSelectValLast=null;
                    },
                });
            }
        },1000);

        //初始化（暂时没有相关接口）
        if(GetQueryString("id")!=null){
            jq1111.ajax({
                type: "GET",
                crossDomain:true,
                url: BasePath+"api/School/Grades",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {

                    //再次初始化form
                    form.render();
                },
                error:function (message) {
                    console.log(message.responseJSON);
                    layer.msg('失败:'+message.responseJSON.message);
                },
            });
        }


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data)
            var postData={
                "majorId": data.field.major,
                "className": data.field.classname
            }
            console.log(postData)
            jq1111.ajax({
                type: "POST",
                crossDomain:true,
                url: BasePath+"api/School/AddClass",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                data:JSON.stringify(postData),
                success:function (message) {
                    console.log(message);
                    var index = layer.alert("", {
                        title: message.msg
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                        layer.close(parentIndex);

                    });
                },
                error:function (message) {
                    var index = layer.alert("", {
                        title: message.msg
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                    });
                },
            });
            return false;
        });

    });



</script>